<template>
  <div class="min-h-screen flex flex-col">
    <!-- Top Bar -->
    <header class="h-14 border-b bg-white/80 backdrop-blur sticky top-0 z-30">
      <div class="h-full px-4 flex items-center justify-between">
        <div class="flex items-center gap-3">
          <div class="w-7 h-7 rounded bg-primary"></div>
          <span class="font-semibold">PromptMasterPro</span>
          <span class="text-xs text-gray-400 hidden sm:inline">按 ⌘K 搜索</span>
        </div>
        <div class="flex items-center gap-3">
          <button class="px-3 h-9 rounded-btn border text-sm hover:bg-gray-50" @click="paletteOpen = true">快速访问</button>
          <div class="w-9 h-9 rounded-full bg-gray-200" aria-label="用户头像"></div>
        </div>
      </div>
    </header>

    <!-- Body -->
    <div class="flex-1 grid grid-cols-[220px_1fr_320px] gap-0">
      <!-- Sidebar -->
      <aside class="border-r bg-white hidden md:block" aria-label="侧边导航">
        <nav class="p-3 space-y-1 text-sm">
          <div class="px-2 py-1 text-gray-400">导航</div>
          <RouterLink class="block px-2 py-2 rounded hover:bg-gray-50" to="/">提示词库</RouterLink>
          <RouterLink class="block px-2 py-2 rounded hover:bg-gray-50" to="/editor">提示词编辑器</RouterLink>
          <RouterLink class="block px-2 py-2 rounded hover:bg-gray-50" to="/experiments">实验对比</RouterLink>
          <RouterLink class="block px-2 py-2 rounded hover:bg-gray-50" to="/approvals">审批中心</RouterLink>
        </nav>
      </aside>

      <!-- Main -->
      <main class="p-4">
        <RouterView />
      </main>

      <!-- Right Panel -->
      <aside class="border-l bg-white hidden lg:block p-4 space-y-4" aria-label="辅助面板">
        <AssistantPanel />
      </aside>
    </div>

    <!-- Command Palette Overlay -->
    <div v-if="paletteOpen" class="fixed inset-0 z-50" role="dialog" aria-modal="true" aria-label="快速访问面板">
      <div class="absolute inset-0 bg-black/30" @click="paletteOpen = false"></div>
      <div class="relative mx-auto mt-24 w-full max-w-2xl rounded-card border shadow-card bg-white">
        <div class="p-3 border-b">
          <input
            v-model="query"
            class="w-full h-10 px-3 border rounded-btn"
            type="text"
            placeholder="搜索提示词或操作...（按 Esc 关闭）"
            aria-label="搜索"
            @keydown.esc.prevent="paletteOpen = false"
          />
        </div>
        <ul class="max-h-72 overflow-auto p-2 text-sm">
          <li v-for="item in filteredItems" :key="item.id">
            <button class="w-full text-left px-3 py-2 rounded hover:bg-gray-50 flex items-center justify-between"
              @click="go(item)">
              <span>{{ item.label }}</span>
              <span class="text-xs text-gray-400">{{ item.hint }}</span>
            </button>
          </li>
          <li v-if="filteredItems.length === 0" class="px-3 py-4 text-gray-500">无匹配结果</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import AssistantPanel from './components/AssistantPanel.vue'

const router = useRouter()
const paletteOpen = ref(false)
const query = ref('')

const items = [
  { id: 'new', label: '新建提示词', hint: 'Library', action: () => router.push('/') },
  { id: 'open-editor', label: '打开提示词编辑器', hint: 'Editor', action: () => router.push('/editor') },
  { id: 'open-experiments', label: '查看实验对比', hint: 'Experiments', action: () => router.push('/experiments') },
  { id: 'open-approvals', label: '进入审批中心', hint: 'Approvals', action: () => router.push('/approvals') },
]

const filteredItems = computed(() => {
  const q = query.value.trim().toLowerCase()
  if (!q) return items
  return items.filter(i => i.label.toLowerCase().includes(q) || i.hint.toLowerCase().includes(q))
})

function go(item: { action: () => void }) {
  item.action()
  paletteOpen.value = false
  query.value = ''
}

function onKeydown(e: KeyboardEvent) {
  const isMac = navigator.platform.toUpperCase().includes('MAC')
  const isCmdK = (isMac ? e.metaKey : e.ctrlKey) && (e.key === 'k' || e.key === 'K')
  if (isCmdK) {
    e.preventDefault()
    paletteOpen.value = true
  }
}

onMounted(() => window.addEventListener('keydown', onKeydown))
onUnmounted(() => window.removeEventListener('keydown', onKeydown))
</script>

<style scoped>
</style>